<template>
  <div class="create_form_box">
    <h3 class="create_form_title" v-html="testDetail?'编辑试验':'创建试验'"/>
    <a-spin :spinning="confirmLoading">
      <a-steps :current="currentStep" size="small" direction="vertical" class="create_step_title">
        <a-step title="基本信息" />
        <a-step title="设置管理" />
        <a-step title="试验描述" />
        <a-step title="试验任务" />
        <a-step title="预览发布" />
      </a-steps>
      <a-form :form="form" class="create_step_content">
        <!-- step1 -->
        <div v-show="currentStep === 0" class="create_form_item">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="试验ID" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-input :disabled="experimentNumberDisabled" v-decorator="['experimentNum', { rules: [{ required: true, message: '请输入试验ID!' }] }]" placeholder="请输入" />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="申办方" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <!-- <a-input v-decorator="['bid', {rules: [{required: true, message: '请输入申办方!'}]}]" placeholder="请输入" /> -->
                <a-select v-decorator="['bid', { rules: [{ required: true, message: '请选择申办方!' }] },]" placeholder="请选择">
                  <a-select-option v-for="item in createFormBaseData.bids" :key="item.companyId" :value="item.companyId"> {{ item.companyName }} </a-select-option>
                </a-select>

              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="试验名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-input v-decorator="['shortName', {rules: [{required: true,message: '请输入试验名称!'}]}]" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="试验全称" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-input v-decorator="['fullName', {rules: [{required: true,message: '请输入试验全称!'}]}]" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="试验类型" has-feedback :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-select v-decorator="['experimentType', { rules: [{ required: true, message: '请选择试验类型!' }] },]" placeholder="请选择">
                  <a-select-option :value="1">临床试验</a-select-option>
                  <a-select-option :value="2">生物制剂安全</a-select-option>
                  <a-select-option :value="3">化妆品安全</a-select-option>
                  <a-select-option :value="4">药品安全</a-select-option>
                  <a-select-option :value="5">食品安全</a-select-option>
                  <a-select-option :value="6">医疗器械安全</a-select-option>
                  <a-select-option :value="7">观察研究</a-select-option>
                  <a-select-option :value="8">公共卫生</a-select-option>
                  <a-select-option :value="9">辐射产品</a-select-option>
                  <a-select-option :value="10">烟草使用</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="研究类型" has-feedback :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-select v-decorator="['researchType',{ rules: [{ required: true, message: '请选择研究类型!' }] },]" placeholder="请选择">
                  <a-select-option :value="1">I期研究 </a-select-option>
                  <a-select-option :value="2">II期研究</a-select-option>
                  <a-select-option :value="3">III期研究</a-select-option>
                  <a-select-option :value="4">IV期研究</a-select-option>
                  <a-select-option :value="5">真实世界研究</a-select-option>
                  <a-select-option :value="6">门诊病人研究</a-select-option>
                  <a-select-option :value="7">住家研究</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="试验时长" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-input v-decorator="['experimentDuration', {rules: [{required: true, message: '请选择研究类型!'}]}]" placeholder="请输入数字 （最大3位）" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="时长单位" has-feedback :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
                <a-select v-decorator="['durationUnit', { rules: [{ required: true, message: '请选择单位!' }] },]" placeholder="请选择">
                  <a-select-option :value="1"> 天 </a-select-option>
                  <a-select-option :value="2"> 周 </a-select-option>
                  <a-select-option :value="3"> 月 </a-select-option>
                  <a-select-option :value="4"> 年 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="数据合作方" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
                <a-select mode="multiple" v-decorator="['dataPartner', { rules: [{ required: true, message: '请选择数据合作方!' }] },]" placeholder="请选择">
                  <a-select-option v-for="item in createFormBaseData.dataPartners" :value="item.companyId" :key="item.companyId">
                    {{ item.companyName }}
                  </a-select-option>

                </a-select>

              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="试验宣传语" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
                <a-textarea :rows="3" v-decorator="['tagline', {rules: [{required: true,message: '请输入试验宣传语!'}]}]" placeholder="请输入（最大字数限制100字）"> </a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="详细描述" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
                <a-textarea :rows="3" v-decorator="['detailDes', {rules: [{required: false}]}]" placeholder="请输入"> </a-textarea>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <div v-show="currentStep === 1" class="create_form_item">

          <a-form-item label="支持平台">
            <a-radio-group v-model="createFormModel.supportPlatform" style="width: 100%">
              <a-radio :value="1">全部支持</a-radio>
              <a-radio :value="2">android</a-radio>
              <a-radio :value="3">ios</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="受试者退出时是否保留受试者数据">
            <a-radio-group v-model="createFormModel.dataRetain" style="width: 100%">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
              <a-radio :value="3">由用户决定</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="是否允许用户重新加入">
            <a-radio-group v-model="createFormModel.rejoin" style="width: 100%">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item>
                <span slot="label">
                  警示语（在APP中提示试图退出试验的受试者
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>APP中展示信息</span>
                    </template>
                    <a-icon type="exclamation" class="tooltip_style" />
                  </a-tooltip>
                </span>
                <a-textarea :rows="3" v-decorator="['warnings', {rules: [{required: true, message: '请输入警示语!' }]}]" placeholder="请输入（最大字数限制20字）"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="试验管理人员">
            <!-- <p class="create_form_item1_title"><span>*</span>  </p> -->
            <a-select @change="handleManagerChange" mode="multiple" class="create_form_item1_select_role" v-decorator="['mangers', { rules: [{ required: true, message: '请选择试验管理人员!' }] },]" placeholder="请选择">
              <a-select-option v-for="item in createFormLoadAccount" :key="item.accountId" :value="item.accountId" :disabled="item.type">
                <table class="select_role_table">
                  <tr v-if="item.type">
                    <th> {{ item.roleName }}</th>
                    <th> {{ item.accountName }}</th>
                  </tr>
                  <tr v-else>
                    <td> {{ item.roleName }}</td>
                    <td> {{ item.accountName }}</td>
                  </tr>
                </table>
              </a-select-option>

            </a-select>
          </a-form-item>

        </div>
        <div v-show="currentStep === 2" class="create_form_item">
          <a-form-item>

            <span slot="label">
              上传试验图片
              <a-tooltip placement="top">
                <template slot="title">
                  <span>支持jpg图片格式，最佳尺寸750x1344</span>
                </template>
                <a-icon type="exclamation" class="tooltip_style" />
              </a-tooltip>
            </span>

            <a-upload
              listType="picture-card"
              :fileList="fileList"
              @change="handlePreview">
              <div v-if="fileList.length < 3">
                <a-icon type="plus" />
                <div class="ant-upload-text">请添加</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" />
            </a-modal>

          </a-form-item>

          <a-form-item label="试验视频URL地址（选填）">
            <a-textarea :rows="3" v-decorator="['videoUrl', { rules: [{ required: false }] }]"/>
          </a-form-item>

          <a-form-item>
            <span slot="label">
              试验描述
              <a-tooltip placement="top">
                <template slot="title">
                  <span>APP中展示信息</span>
                </template>
                <a-icon type="exclamation" class="tooltip_style" />
              </a-tooltip>
            </span>

            <a-textarea :rows="3" v-decorator="['experimentDes', {rules: [{required: true, message: '请选输入试验描述!'}]}]" placeholder="请输入（最大字数限制200字）"> </a-textarea>

          </a-form-item>
        </div>
        <div v-show="currentStep === 3" class="create_form_item">
          <div class="create_form_item1_title_box">
            <span class="create_form_item1_title">计数任务</span>
            <a-button type="primary" icon="plus" @click="createFormCountEvent(1)">新增任务</a-button>

            <a-table :columns="createForm4CountTable" :dataSource="createForm4CountData" size="middle" :pagination="false" class="createForm1Table_box">
              <!-- <template slot="name" slot-scope="text">
                <a href="javascript:;">{{text}}</a>
              </template> -->
              <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
              <span slot="type" slot-scope="text, record, index">{{ createForm4CountTableType[text] }}</span>
              <span slot="taskFrequency" slot-scope="text, record, index">{{ createForm4CountTableTaskFrequency[text] }}</span>
              <span slot="action" slot-scope="text, record, index" class="operation_button_box">
                <template>
                  <a-button v-if="!record.id" size="small" type="primary" @click="handleEdit(record, 3, index)" ghost>编辑</a-button>
                  <a-button size="small" type="danger" style="margin-left: 5px" @click="handleDelete(index, 1)" ghost>删除</a-button>
                </template>
              </span>
            </a-table>
          </div>
          <div class="create_form_item1_title_box">
            <span class="create_form_item1_title">问卷任务</span>
            <a-button type="primary" icon="plus" @click="createFormCountEvent(2)">新增任务</a-button>
            <a-table :columns="createForm4CountTable" :dataSource="createForm4QuestionnaireData" size="middle" :pagination="false" class="createForm1Table_box">
              <!-- <template slot="name" slot-scope="text">
                <a href="javascript:;">{{text}}</a>
              </template> -->
              <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
              <span slot="type" slot-scope="text, record, index">{{ createForm4CountTableType[text] }}</span>
              <span slot="taskFrequency" slot-scope="text, record, index">{{ createForm4CountTableTaskFrequency[text] }}</span>
              <span slot="action" slot-scope="text, record, index" class="operation_button_box">
                <template>
                  <a-button v-if="!record.id" size="small" type="primary" @click="handleEdit(record, 4, index)" ghost>编辑</a-button>
                  <a-button size="small" type="danger" style="margin-left: 5px" @click="handleDelete(index, 2)" ghost>删除</a-button>
                </template>
              </span>
            </a-table>
          </div>
        </div>
        <div v-show="currentStep === 4" class="create_form_item">
          <div class="create_form_item4_tab">
            <a-row :gutter="24">
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">试验ID：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("experimentNum") }}</span>
              </a-col>
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">申办方：</span>
                <span class="create_form_item4_text" v-for="item in createFormBaseData.bids" :key="item.companyId">
                  <i style="font-style: normal;" v-if="item.companyId=== form.getFieldValue('bid')">{{ item.companyName }} </i>
                </span>
              </a-col>
            </a-row>
            <a-row :gutter="24">

              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">试验简称：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("shortName") }}</span>
              </a-col>
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">试验全称：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("fullName") }}</span>
              </a-col>
            </a-row>

            <a-row :gutter="24">

              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">试验类型：</span>
                <span class="create_form_item4_text">{{ experimentTypeArray[form.getFieldValue("experimentType")] }}</span>
              </a-col>
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">研究类型：</span>
                <span class="create_form_item4_text">{{ researchTypeArray[form.getFieldValue("researchType")] }}</span>
              </a-col>
            </a-row>
            <a-row :gutter="24">

              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">试验时长：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("experimentDuration") }}</span>
              </a-col>
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">时长单位：</span>
                <span class="create_form_item4_text">{{ durationUnitArray[form.getFieldValue("durationUnit")] }}</span>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24" class="create_form_item4_box">
                <span class="create_form_item4_title">数据合作方：</span>
                <span class="create_form_item4_text">
                  <i style="font-style: normal;margin-right: 30px;" v-for="item in form.getFieldValue('dataPartner')" :key="item">
                    {{ dataPartnersObj[item] }}
                  </i>
                </span>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">试验宣传语：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("tagline") }}</span>
              </a-col>
            </a-row>
            <a-row :gutter="24">

              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">详细描述：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("detailDes") }}</span>
              </a-col>
            </a-row>
            <!-- <p class="create_form_item4_tab_wire"></p> -->
          </div>
          <div class="create_form_item4_tab">

            <a-row :gutter="24">
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">支持平台：</span>
                <span class="create_form_item4_text">{{ supportPlatformArray[createFormModel.supportPlatform] }}</span>
              </a-col>

            </a-row>
            <a-row :gutter="24">
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">是否允许受试者重新加入试验：</span>
                <span class="create_form_item4_text">{{ rejoinArray[createFormModel.rejoin] }}</span>
              </a-col>
              <a-col :span="12" class="create_form_item4_box">
                <span class="create_form_item4_title">受试者退出时是否保留受试者数据：</span>
                <span class="create_form_item4_text">{{ dataRetainArray[createFormModel.dataRetain] }}</span>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24" class="create_form_item4_box">
                <span class="create_form_item4_title">警示语：</span>
                <span class="create_form_item4_text">{{ form.getFieldValue("warnings") }}</span>
              </a-col>
            </a-row>
            <p class="create_form_item4_tab_wire"/>
          </div>
          <div class="create_form_item4_tab">
            <p class="create_form_item1_title"> 试验管理人员 </p>
            <a-table :columns="createForm1Table" :dataSource="createFormDataX" size="middle" :pagination="false" class="createForm1Table_box">
              <!-- <template slot="name" slot-scope="text">
                <a href="javascript:;">{{text}}</a>
              </template> -->
              <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
              <span v-if="false" slot="action" slot-scope="text, record, index" class="operation_button_box">
                <template>
                  <a-button size="small" type="danger" @click="handleDeleteX(index)" ghost>删除</a-button>
                </template>
              </span>
            </a-table>
            <p class="create_form_item4_tab_font"/>
          </div>
          <div class="create_form_item4_tab">
            <p class="create_form_item1_title">计数任务 </p>
            <a-table :columns="createForm4CountTable" :dataSource="createForm4CountData" size="middle" :pagination="false" class="createForm1Table_box">
              <!-- <template slot="name" slot-scope="text">
                <a href="javascript:;">{{text}}</a>
              </template> -->

              <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
              <span slot="type" slot-scope="text, record, index">{{ createForm4CountTableType[text] }}</span>
              <span slot="taskFrequency" slot-scope="text, record, index">{{ createForm4CountTableTaskFrequency[text] }}</span>
              <span v-if="false" slot="action" slot-scope="text, record, index" class="operation_button_box">
                <template>
                  <a-button v-if="!record.id" size="small" type="primary" @click="handleEdit(record, 3, index)" ghost>编辑</a-button>
                  <a-button size="small" type="danger" @click="handleDelete(index, 1)" ghost>删除</a-button>
                </template>
              </span>
            </a-table>
            <p class="create_form_item4_tab_font"/>
          </div>
          <div class="create_form_item4_tab">
            <p class="create_form_item1_title"> 问卷任务 </p>
            <a-table :columns="createForm4CountTable" :dataSource="createForm4QuestionnaireData" size="middle" :pagination="false" class="createForm1Table_box">
              <!-- <template slot="name" slot-scope="text">
                <a href="javascript:;">{{text}}</a>
              </template> -->
              <span slot="serial" slot-scope="text,record,index">{{ index + 1 }}</span>
              <span slot="type" slot-scope="text, record, index">{{ createForm4CountTableType[text] }}</span>
              <span slot="taskFrequency" slot-scope="text, record, index">{{ createForm4CountTableTaskFrequency[text] }}</span>
              <span v-if="false" slot="action" slot-scope="text, record, index" class="operation_button_box">
                <template>
                  <a-button v-if="!record.id" size="small" type="primary" @click="handleEdit(record, 4, index)" ghost>编辑</a-button>
                  <a-button size="small" type="danger" @click="handleDelete(index, 2)" ghost>删除</a-button>
                </template>
              </span>
            </a-table>
            <p class="create_form_item4_tab_font"/>
          </div>
        </div>
        <!-- step1 end -->
      </a-form>
    </a-spin>
    <div class="create_form_font">
      <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }">上一步</a-button>
      <a-button key="cancel" @click="handleCancel" style="margin-left:20px;">取消</a-button>
      <a-button key="cancel" @click="handleNext(currentStep,true)" style="margin-left:20px;" v-if="currentStep === 4 && experimentNumberDisabled === false">预发布</a-button>
      <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)" style="margin-left:20px;">{{ currentStep === 4 && '发布' || '下一步' }}</a-button>
    </div>
    <a-modal
      :width="976"
      :title="editFormTitle"
      :footer="null"
      :visible="CreateFormCountBox"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="onNewTaskCancel">
      <new-task @newTaskEvent="newTaskData" @close="onNewTaskCancel" :taskData="editFormData" :taskTitle="editFormTitle" :taskType="CreateFormCountType">
      </new-task>
    </a-modal>
  </div>
</template>

<script>
import NewTask from './NewTask'
import pick from 'lodash.pick'
import { getCreatFormBidAndDataPartner, getCreatFormLoadAccount, postCreatFormAdd, postCreatFormUpdate } from '@/api/experiment'
import { getTestDetail, postFileUpload } from '@/api/manage'

function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
const stepForms = [
  ['experimentNum', 'shortName', 'fullName', 'experimentType', 'researchType', 'bid', 'dataPartner', 'experimentDuration', 'durationUnit', 'tagline', 'detailDes'],
  ['warnings', 'mangers'],
  ['photoUrls', 'videoUrl', 'experimentDes']
  // ['photoUrls', 'videoUrl', 'experimentDes'],
]

// const OPTIONS = [{ 'aa': '账号', 'bb': '角色', 'c': '1' }, { 'aa': '管理员', 'bb': '张三' }, { 'aa': '超级管理员', 'bb': '李四' }, { 'aa': '系统管理员', 'bb': '王五' }, { 'aa': '操作员', 'bb': '王五' }]

// const id = 0

export default {
  name: 'StepByStepModal',
  components: {
    NewTask
  },
  data () {
    return {
      testDetail: '',
      testDetailData: '',
      createFormBaseData: {},

      createFormLoadAccount: [],

      experimentNum: '',
      shortName: '',
      createFormData: {},

      createFormModel: {
        dataRetain: 1,
        supportPlatform: 1,
        rejoin: 1
      },

      // selectedItems: [],

      ModalText: '',

      CreateFormCountType: '',
      editFormTitle: '',
      editFormData: '',
      CreateFormCountBox: false,
      editIndex: -1,
      CreateFormQuestionnaireBox: false,

      valuesss: null,

      CreateFormCountPlan: 1,
      CreateFormCountFrequency: 1,
      radioStyle: {
        display: 'inline-block',
        height: '30px',
        lineHeight: '30px',
        float: 'left'
      },

      // tab3 上传图标
      previewVisible: false,
      previewImage: '',
      uploadFileList: [],
      fileList: [], // {
      // uid: '-1',
      // name: 'xxx.png',
      // status: 'done',
      // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      // }],

      // tab2 表格
      createForm1Table: [{
        title: '序号',
        // dataIndex: 'accountId',
        align: 'center',
        width: '25%',
        scopedSlots: {
          customRender: 'serial'
        }
      },
      {
        title: '账号',
        dataIndex: 'accountName',
        // align: 'center',
        width: '25%',
        scopedSlots: {
          customRender: 'name'
        }
      },
      {
        title: '角色',
        dataIndex: 'roleName',
        width: '25%%',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: '25%%',
        scopedSlots: {
          customRender: 'action'
        },
        align: 'right'
      }
      ],
      // tab2 表格数据
      createFormDataX: [],
      // createFormData: [{
      //   key: '1',
      //   name: 'John Brown',
      //   age: 32,
      //   address: 'New York No. 1 Lake Park',
      //   tags: ['nice', 'developer']
      // },
      // {
      //   key: '2',
      //   name: 'Jim Green',
      //   age: 42,
      //   address: 'London No. 1 Lake Park',
      //   tags: ['loser']
      // }
      //   // {
      //   //   key: '3',
      //   //   name: 'Joe Black',
      //   //   age: 32,
      //   //   address: 'Sidney No. 1 Lake Park',
      //   //   tags: ['cool', 'teacher'],
      //   // },
      // ],
      // 表格4 计数表格
      createForm4CountTableType: {
        '1': '计数器',
        '2': '问答',
        '3': '选择'
      },
      createForm4CountTableTaskFrequency: {
        '1': '一次',
        '2': '每天',
        '3': '每周',
        '4': '每月',
        '5': '自定义'
      },
      experimentTypeArray: {
        '1': '临床试验',
        '2': '生物制剂安全',
        '3': '化妆品安全',
        '4': '药品安全',
        '5': '食品安全',
        '6': '医疗器械安全',
        '7': '观察研究',
        '8': '公共卫生',
        '9': '辐射产品',
        '10': '烟草使用'
      },
      researchTypeArray: {
        '1': 'I期研究',
        '2': 'II期研究',
        '3': 'III期研究',
        '4': 'IV期研究',
        '5': '真实世界研究',
        '6': '门诊病人研究',
        '7': '住家研究'
      },
      durationUnitArray: {
        '1': '天',
        '2': '周',
        '3': '月',
        '4': '年'
      },
      supportPlatformArray: {
        '1': '全部支持',
        '2': '周',
        '3': 'ios'
      },
      dataRetainArray: {
        '1': '是',
        '2': '否',
        '3': '由用户决定'
      },
      rejoinArray: {
        '1': '是',
        '2': '否'
      },
      dataPartnersObj: {

      },
      createForm4CountTable: [{
        title: '序号',
        // dataIndex: 'id',
        align: 'center',
        scopedSlots: { customRender: 'serial' },
        width: '20%' // ,
        // scopedSlots: {
        //   customRender: 'name'
        // }
      },
      {
        title: '名称',
        dataIndex: 'name',
        width: '20%',
        align: 'center'
      },
      {
        title: '类型',
        dataIndex: 'type',
        scopedSlots: { customRender: 'type' },
        width: '20%',
        align: 'center'
      },
      {
        title: '频率',
        dataIndex: 'taskFrequency',
        scopedSlots: { customRender: 'taskFrequency' },
        width: '20%',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: '20%',
        scopedSlots: {
          customRender: 'action'
        },
        align: 'center'
      }
      ],
      // 表格4 计数数据
      createForm4CountData: [],
      // 表格4 问卷表格
      createForm4QuestionnaireTable: [{
        title: '序号',
        dataIndex: 'id',
        width: '20%',
        align: 'center'
        // scopedSlots: {
        //   customRender: 'name'
        // }
      },
      {
        title: '名称',
        dataIndex: 'name',
        width: '20%',
        align: 'center'
      },
      {
        title: '类型',
        dataIndex: 'type',
        width: '20%',
        align: 'center'
      },
      {
        title: '频率',
        dataIndex: 'taskFrequency',
        width: '20%',
        align: 'center'
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: '20%',
        scopedSlots: {
          customRender: 'action'
        },
        align: 'center'
      }
      ],
      // 表格4 问卷数据
      createForm4QuestionnaireData: [
      ],

      plainOptions: ['iOS', 'Android', '全部'],
      checkedList: ['Android'],
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 2
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 4
        }
      },
      visible: false,
      confirmLoading: false,
      currentStep: 0,
      experimentNumberDisabled: false,
      mdl: {},

      form: this.$form.createForm(this)
    }
  },

  computed: {
    // filteredOptions () {
    //   // console.log(OPTIONS.filter(o => !this.selectedItems.includes(o)), '选择数据呢杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀')
    //   return OPTIONS.filter(o => !this.selectedItems.includes(o))
    // }
  },

  methods: {
    onNewTaskCancel () {
      // var current = new Date().getMilliseconds()
      // this.$set(this.editFormData, new Date().getMilliseconds())
      this.CreateFormCountBox = false
      this.experimentNumberDisabled = false
      this.editFormData = new Date().getMilliseconds()
    },
    handleEdit (v, type, index) {
      this.editIndex = index
      // if (type === 1) {
      //   console.log(v, '数据')
      // } else {
      console.log(v, '数据')
      // }
      this.editFormData = v
      this.createFormCountEvent(type)
    },
    // handleEdit1(v) {
    //   console.log(v, '数据')
    // },
    //  每日任务删除
    handleDeleteX (v) {
      this.createFormDataX.splice(v, 1)
    },
    handleDelete (v, type) {
      if (type === 1) {
        this.createForm4CountData.splice(v, 1)
      } else {
        this.createForm4QuestionnaireData.splice(v, 1)
      }
    },
    handleManagerChange (v) {
      // 'roleName': '角色', 'accountName': '名字', 'accountId': '1', 'type': '1'
      console.log(v, '数据')
    },
    createFormBaseQuery () {
      getCreatFormBidAndDataPartner().then(res => {
        this.createFormBaseData = res.data
        // this.dataPartnersObj = res.data.dataPartners
        const obj = res.data.dataPartners
        for (const item in obj) {
          if (obj.hasOwnProperty(item)) {
            this.dataPartnersObj[obj[item].companyId.toString()] = obj[item].companyName
          }
        }
        // this.userDetailData = res.data
      })
      getCreatFormLoadAccount().then(res => {
        this.createFormLoadAccount = res.data.list
        this.createFormLoadAccount.unshift({ 'roleName': '角色', 'accountName': '名字', 'accountId': '1', 'type': '1' })
      })
    },

    newTaskData (data) {
      // debugger
      if (this.CreateFormCountType === 1 || this.CreateFormCountType === 3) { // 创建计数
        if (this.editIndex === -1) {
          data.sort = this.createForm4CountData.length + 1
          this.createForm4CountData.push(data)
        } else {
          // data.sort = this.createForm4CountData.length + 1
          // this.createForm4CountData.splice(v, 1)
          // this.createForm4CountData[this.editIndex] = data
          this.$set(this.createForm4CountData, this.editIndex, data)
        }
      } else if (this.CreateFormCountType === 2 || this.CreateFormCountType === 4) { // 创建选择
        if (this.editIndex === -1) {
          data.sort = this.createForm4QuestionnaireData.length + 1
          this.createForm4QuestionnaireData.push(data)
        } else {
          // this.createForm4QuestionnaireData[this.editIndex] = data
          this.$set(this.createForm4QuestionnaireData, this.editIndex, data)
        }
      }
      this.editIndex = -1
      this.CreateFormCountBox = false
      this.editFormData = new Date().getMilliseconds()
      // this.$set(this.editFormData, new Date().getMilliseconds())
    },
    // handleChangesss (selectedItems) {
    //   this.selectedItems = selectedItems
    // },
    handleOk () {
    },
    callback () {
    },
    // onChanges (date, dateString) {
    //   console.log(date, dateString)
    // },
    // onChangetime (time) {
    //   console.log(time)
    //   this.valuesss = time
    // },
    createFormCountEvent (v) {
      // debugger
      this.CreateFormCountType = v
      if (v === 1) {
        this.editFormTitle = '新建计数任务'
        this.editFormData = ''
      } else if (v === 2) {
        this.editFormTitle = '新建问卷任务'
        this.editFormData = ''
      } else if (v === 3) {
        this.editFormTitle = '编辑计数任务'
      } else if (v === 4) {
        this.editFormTitle = '编辑问卷任务'
      }
      this.CreateFormCountBox = true
    },
    handleCancel () {
      this.$emit('Cancel')
      // this.previewVisible = false;
    },
    // beforeUpload (file) {
    //   debugger
    //   console.log(file, '文件')
    //   this.fileList = [...this.fileList, file]
    //   return false
    // },
    handlePreview (info) {
      // debugger
      this.fileList = info.fileList
      if (!info || !info.fileList || !info.file || (info.file.status === 'uploading' && info.file.percent > 0) ||
        info.file.status === 'error') {
        return
      }
      //
      // if (info.fileList.length <= 0) {
      //   const body = {
      //     photoUrl: info.file.thumbUrl
      //   }
      //   postFileUpload(body).then(res => {
      //     console.log(res, 'handlePreview')
      //     if (res.code === 200) {
      //       const data = {
      //         uid: info.file.uid,
      //         url: res.data.url
      //       }
      //       this.fileList.push(data)
      //     }
      //   })
      // }

      // this.createForm4QuestionnaireData[this.editIndex] = data
      let index = -1
      for (const i in info.fileList) {
        if (info.fileList.hasOwnProperty(i)) {
          if (info.file.uid === info.fileList[i].uid) {
            index = i
            break
          }
        }
      }

      if (info.file.status === 'removed' && info.fileList.length === 0) {
        this.uploadFileList.length = 0
        return
      }

      if (index === -1) {
        return
      }

      // debugger
      if (info.file.status === 'removed' && this.uploadFileList[index]) {
        this.uploadFileList.splice(this.uploadFileList[index], 1)
        return
      }

      if (this.uploadFileList.length > index && this.uploadFileList[index] &&
        this.uploadFileList[index].uid === info.file.uid && this.uploadFileList[index].url) {
        return
      }

      if (info.file.originFileObj) {
        getBase64(info.file.originFileObj, imageUrl => {
          const body = {
            photoUrl: imageUrl
          }
          postFileUpload(body).then(res => {
            console.log(res, 'handlePreview')
            if (res.code === 200) {
              // if (this.uploadFileList[index]) {
              //   this.uploadFileList[index].uid = res.data.uid
              //   this.uploadFileList[index].url = res.data.url
              // } else {
              const data = {
                status: 'done',
                uid: info.file.uid,
                url: res.data.url
              }
              // debugger
              this.uploadFileList.push(data)
              // }
            }
          })
        })
      }
      //
      // this.fileList = info.fileList
      // debugger
      // console.log(info, '文件info')
      // console.log(this.fileList, '文件fileList')
      // // if (!file.url && !file.preview) {
      // getBase64(info.file.originFileObj, imageUrl => {
      //   // debugger
      //   // this.imageUrl = imageUrl
      //   this.loading = false
      //   // this.previewVisible = true
      //   const body = {
      //     photoUrl: imageUrl
      //   }
      //   postFileUpload(body).then(res => {
      //     console.log(res, '数据角色人员')
      //   })
      // })

      // }

      // this.previewImage = file.url || file.thumbUrl
      // this.previewVisible = true
    },
    // handleChange ({
    //   fileList
    // }) {
    //   this.fileList = fileList
    // },
    onChange (v) {
      console.log(v, '数据')
    },

    edit (record) {
      if (record) {
        this.testDetail = record
        const param = {
          experimentId: record.id
        }
        getTestDetail(param).then(res => {
          console.log(res.message)
          if (res.code === 200) {
            this.experimentNumberDisabled = true
            this.$message.success(res.message)
            this.testDetailData = res.data
            if (!this.testDetailData) {
              this.$message.error(res.message)
              return
            }
            const managers = []
            if (this.testDetailData.managers && this.testDetailData.managers.length > 0) {
              for (const manager in this.testDetailData.managers) {
                if (this.testDetailData.managers.hasOwnProperty(manager)) {
                  managers.push(this.testDetailData.managers[manager].accountId)
                  // this.createFormDataX.push(this.testDetailData.managers[manager])
                }
              }
            }

            // debugger
            if (this.testDetailData.photoUrl && this.testDetailData.photoUrl.length > 0) {
              for (const photo in this.testDetailData.photoUrl) {
                if (this.testDetailData.photoUrl.hasOwnProperty(photo)) {
                  const newPhoto = {
                    uid: this.testDetailData.photoUrl[photo],
                    // name: 'xxx.png',
                    status: 'done',
                    url: this.testDetailData.photoUrl[photo]
                  }
                  this.fileList.push(newPhoto)
                  this.uploadFileList.push(newPhoto)
                }
              }
            }

            const { form: { setFieldsValue } } = this
            setFieldsValue({
              experimentNum: this.testDetailData.experimentNum,
              fullName: this.testDetailData.fullName,
              shortName: this.testDetailData.shortName,
              experimentType: this.testDetailData.experimentType,
              researchType: this.testDetailData.researchType,
              bid: this.testDetailData.bid,
              detailDes: this.testDetailData.detailDes,
              experimentDuration: this.testDetailData.experimentDuration,
              durationUnit: this.testDetailData.durationUnit,
              tagline: this.testDetailData.tagline,
              // supportPlatform: this.testDetailData.supportPlatform,
              // rejoin: this.testDetailData.rejoin,
              principal: this.testDetailData.principal,
              // dataRetain: this.testDetailData.dataRetain,
              warnings: this.testDetailData.warnings,
              experimentDes: this.testDetailData.experimentDes,
              videoUrl: this.testDetailData.videoUrl,
              photoUrls: this.testDetailData.photoUrl,
              dataPartner: this.testDetailData.dataPartners,
              mangers: managers
              // experimentTaskDetailVOS: this.testDetailData.experimentTaskDetailVOS
            })
            this.createFormModel.rejoin = this.testDetailData.rejoin
            this.createFormModel.dataRetain = this.testDetailData.dataRetain
            this.createFormModel.supportPlatform = this.testDetailData.supportPlatform

            // this.form.setFieldsValue({ experimentNum: this.testDetailData.experimentNum })
            // this.dataRetain = this.testDetailData.dataRetain === 1 ? '是' : '否'
            // this.rejoin = this.testDetailData.rejoin === 1 ? '是' : '否'
            // debugger
            if (this.testDetailData.experimentTaskDetailVOS && this.testDetailData.experimentTaskDetailVOS.length > 0) {
              for (const i in this.testDetailData.experimentTaskDetailVOS) {
                if (this.testDetailData.experimentTaskDetailVOS.hasOwnProperty(i)) {
                  const task = this.testDetailData.experimentTaskDetailVOS[i]
                  if (task.type === 1) {
                    this.createForm4CountData.push(task)
                  } else {
                    this.createForm4QuestionnaireData.push(task)
                  }
                }
              }
            }
          } else {
            this.$message.error(res.message)
          }
          // return res.data
        })
      }
      this.visible = true
      const {
        form: {
          setFieldsValue
        }
      } = this
      this.$nextTick(() => {
        setFieldsValue(pick(record, []))
      })
    },
    handleNext (step, type = false) {
      // debugger
      const {
        form: {
          validateFields
        }
      } = this
      const currentStep = step + 1
      if (currentStep <= 4) {
        // stepForms
        validateFields(stepForms[this.currentStep], (errors, values) => {
          if (!errors) {
            this.currentStep = currentStep
            if (currentStep === 4 && this.createFormLoadAccount && this.createFormLoadAccount.length > 0 &&
              values['mangers'] && values['mangers'].length > 0) {
              this.createFormDataX.length = 0
              const ids = values['mangers']
              for (const manager in this.createFormLoadAccount) {
                if (this.createFormLoadAccount.hasOwnProperty(manager)) {
                  for (const i in ids) {
                    if (ids.hasOwnProperty(i)) {
                      if (this.createFormLoadAccount[manager].accountId === ids[i]) {
                        this.createFormDataX.push(this.createFormLoadAccount[manager])
                      }
                    }
                  }
                }
              }
            }
          }
        })
        return
      }
      if (currentStep === 5) {
        this.confirmLoading = true
        validateFields((errors, values) => {
          console.log('errors:', errors, 'val:', values)
          if (!errors) {
            this.createFormData = { ...values, ...this.createFormModel }
            console.log(this.createForm4CountData, '提交数组')
            console.log(this.createForm4QuestionnaireData, '提交数组333')

            for (let i = 0; i < this.createForm4CountData.length; i++) {
              this.createForm4CountData[i].sort = i + 1
            }

            for (let i = 0; i < this.createForm4QuestionnaireData.length; i++) {
              this.createForm4QuestionnaireData[i].sort = i + 1
            }

            this.createFormData.taskDTOS = [...this.createForm4CountData, ...this.createForm4QuestionnaireData]
            // this.createFormData.taskDTOS.push(...this.createForm4CountData, ...this.createForm4QuestionnaireData)
            const photoUrls = []
            if (this.uploadFileList && this.uploadFileList.length > 0) {
              for (const photo in this.uploadFileList) {
                if (this.uploadFileList.hasOwnProperty(photo)) {
                  photoUrls.push(this.uploadFileList[photo].url)
                }
              }
            }
            this.createFormData.photoUrls = photoUrls
            type === true ? this.createFormData.type = 1 : this.createFormData.type = 2
            type === true ? this.createFormData.status = 2 : this.createFormData.status = 3
            if (this.testDetailData && this.testDetailData.id) {
              this.createFormData.id = this.testDetailData.id
              postCreatFormUpdate(this.createFormData).then(res => {
                // this.createFormBaseData = res.data
                // this.userDetailData = res.data
              })
            } else {
              postCreatFormAdd(this.createFormData).then(res => {
                console.log(res, '请求接口返回数据')
                // this.createFormBaseData = res.data
                // this.userDetailData = res.data
              })
            }
            setTimeout(() => {
              this.$emit('Cancel')
              this.confirmLoading = false
              this.experimentNumberDisabled = false
            }, 1500)
          } else {
            this.confirmLoading = false
          }
        })
      }
      // last step
    },
    backward () {
      this.currentStep--
    }
    // handleCancel () {
    //   // clear form & currentStep
    //   this.visible = false
    //   this.currentStep = 0
    // }
  },
  mounted () {
    this.createFormBaseQuery()
  },
  created () {
  }
}
</script>
<style lang="less" >
.create_form_box {
  .create_form_title {
    background: linear-gradient(to right, #56ced1 0%, #56ced1 3px, #fff 3px, #fff 100%);
    font-size: 20px;
    font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    padding-left: 10px;
  }
  // margin: 24px 68px;
  .create_step_title {
    width: 115px;
    float: left;
    margin-left: 20px;
    margin-top: 50px;
    border-right: 1px #efefef solid;
    padding: 30px 2px 30px 0;
  }
  .create_step_content {
    overflow: hidden;
    margin: 0 auto;
    width: 765px;
  }

  .ant-steps-item-process {
    .ant-steps-item-title {
      width: 100%;
      // margin-left: 0.5px;
      color: #56ced1 !important;
      font-weight: 600;
      background: linear-gradient(to left, #56ced1 0%, #56ced1 2px, #fff 2px, #fff 100%);
    }
  }

  .ant-form-item-label label::after {
    content: '';
  }
  .create_form_item1_select_role {
    width: 100%;
  }
}

.ant-form-item-label label::after {
  content: '';
}

.select_role_table {
  width: 100%;
  text-align: center;
  tr {
    width: 100%;
    th {
      width: 50%;

      font-size: 14px;
      font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
    td {
      width: 50%;
      font-size: 14px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}

// .create_form_tab {
//   margin-bottom: 50px;
//   .ant-steps-icon {
//     width: 10px;
//     height: 22px;
//     font-size: 16px;
//     font-family: PingFang-SC-Bold, PingFang-SC;
//     font-weight: bold;
//     color: rgba(255, 255, 255, 1);
//     line-height: 22px;
//   }
//   .ant-steps-item-title {
//     font-size: 16px;
//     font-weight: 400;
//     color: rgba(140, 140, 140, 1);
//   }
// }
.create_form_box {
  .ant-col-9 {
    padding-left: 0 !important;
  }
  .ant-row {
    .ant-form-item {
      // margin-bottom: 20px;
    }
  }
  .create_form_item {
    min-height: 550px;
  }
  .ant-form-item-required {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
  }
  .create_form_item1_title_box {
    margin-bottom: 30px;

    .create_form_item2_clearfix {
      .ant-upload-btn {
        margin-top: 20px;
      }
    }
    .createForm1Table_box {
      .ant-empty-normal {
        margin: 0;
      }
    }
    .createForm1TableAdd {
      width: 100%;
      height: 40px;
      border-radius: 4px;
      border: 1px dashed rgba(217, 217, 217, 1);
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      &:hover {
        border: 1px solid rgba(217, 217, 217, 1);
        .createForm1TableAdd_text {
          color: #000;
        }
      }
      .createForm1TableAdd_text {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }
  .create_form_item4_tab {
    .create_form_item4_tab_wire {
      margin: 30px 0;
      height: 1px;
      background: rgba(232, 232, 232, 1);
    }

    .create_form_item4_tab_font {
      margin-top: 30px;
    }
    .create_form_item4_box {
      min-height: 55px;
      .create_form_item4_title {
        height: 24px;
        font-size: 16px;
        // font-family: PingFangSC-Regular, PingFang SC;
        // font-weight: 400;
        // color: rgba(0, 0, 0, 1);

        /*font-size: 16px;*/
        font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
        font-weight: 400;
        color: rgba(140, 140, 140, 1);
        line-height: 24px;
      }
      .create_form_item4_text {
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
        font-weight: 400;
        color: rgba(17, 17, 17, 1);
        line-height: 24px;
      }
    }
  }
}
.create_form_item1_title {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  span {
    font-size: 17px;
    color: #d31e27;
  }
  margin-right: 30px;
}

.createForm_count_date {
  min-width: 230px;
  margin-right: 20px;
}

.create_form_item1_title_box {
  margin-bottom: 30px;
}
.createForm_count_time {
  min-width: 165px;
  margin-right: 20px;
}

.tooltip_style {
  font-size: 16px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  border-radius: 50%;
  margin-left: 5px;
  background: rgb(191, 191, 191);
}

.createForm_count_box {
  margin: 0 38px;
  .ant-select {
    width: 224px;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
}

.create_form_font {
  float: right;
}
.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon {
  color: #fff !important;
}
// 上传图片样式
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
